<template>
  <div>
    <ProcessInLine :list="stepList" :active="active"></ProcessInLine>
    <CourseBaseInfo :save="save" :close="close" v-if="active == 1"></CourseBaseInfo>
    <CourseItemList v-if="active == 2" :save="save" :close="close" :preStep="preStep"></CourseItemList>
    <CourseFinish v-if="active == 3" :reset="reset" :save="save" :close="close" ref=""></CourseFinish>
  </div>
</template>

<script>
  import ProcessInLine from "@/components/Process/ProcessInLine";
  import CourseBaseInfo from "./CourseBaseInfo";
  import CourseItemList from "./CourseItemList";
  import CourseFinish from "./CourseFinish";

  export default {
    name: "AddOnlineCourse",
    props:["id","close"],
    components: {CourseFinish, CourseItemList, CourseBaseInfo, ProcessInLine},
    data() {
      return {
        stepList: [
          {
            index: 1,
            text: "课程信息",
            text_en: 'Course Info',
          },
          {
            index: 2,
            text: "课程目录",
            text_en: 'Course Catalogue',
          },
          {
            index: 3,
            text: "完成",
            text_en: 'Complete',
          },
        ],
        active: 1,
        model: {
          "id": 56,
          "companyId": null,
          "courseCateId": 72,
          "companyCateId": null,
          "courseType": 1,
          "courseName": "答复",
          "summary": "1212测试",
          "face": "/platform/image/20201115/201115103031419.png",
          "memo": "<p>阿斯顿发生大</p>",
          "courseLabel": "阿凡达",
          "lockMode": null,
          "unlockDay": null,
          "liveUrl": null,
          "liveDuration": null,
          "liveAllowReplay": null,
          "outBeginTime": null,
          "outEndTime": null,
          "outAddress": null,
          "outFee": null,
          "supplierId": null,
          "isRelease": 1,
          "createTime": "2020-11-15 10:30:43",
          "creator": 1,
          "isDelete": 0,
          "companyName": null,
          "courseCateName": "法语",
          "supplierName": null,
          "companyCourseId": null,
          "companyCourseIsRelease": null,
          "parentCateId": null,
          "parentCateName": null
        }
      }
    },
    created() {
      if(this.$route.query.id || this.id)this.getCourse(this.$route.query.id || this.id)
    },
    watch:{
      "id":function (newVal,oldValue) {
        if(newVal !== oldValue)this.getCourse(newVal);
      }
    },
    methods:{
      getCourse(id){
        this.$api.course.getCourse({id:id}).then(
          res => {
            this.model = res.data;
          }
        )
      },
      preStep(){
        this.active --;
      },
      save(){
        this.active ++;
      },
      reset(){
        this.active = 1;
      },
    }
  }
</script>

<style scoped>

</style>
